<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>
    <div class="layui-container" style="margin: 15px;padding: 15px;background-color: #fff;">
        <table class="layui-table">
            <thead>
                <tr>
                    <th>订单号</th>
                    <th>订单金额</th>
                    <th>订单商品</th>
                    <th>下单时间</th>
                    <th>订单状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {foreach $lists as $list}
                <tr>
                    <td>{$list['ord_no']}</td>
                    <td>{$list['money']}</td>
                    <td>
                        {foreach $list['products'] as $product}
                        <p>商品名称：<a href="/product/detail.html?out_no={$product['sku']['out_no']}" title="{$product['sku']['sku_title']}">{$product['sku']['sku_title']}</a>，数量：{$product['count']}，单价：{$product['price']}</p>
                        {/foreach}
                    </td>
                    <td>{$list['add_time']}</td>
                    <td>{$list['status_text']|raw}</td>
                    <td>
                        {if $list['status'] == 3}
                        <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del({$list['id']})">删除</button>
                        {elseif $list['status'] == 0}
                        <button class="layui-btn layui-btn-xs" onclick="pay({$list['id']})">支付</button>
                        {/if}
                    </td>
                </tr>
                {/foreach}
            </tbody>
        </table>

        <div id="pages"></div>
    </div>

    <script>
        var $ = layui.jquery;

        // 支付订单
        function pay(id) {
            $.post('/buy/pay', { id }, function (res) {
                if (res.code) return layer.alert(res.msg, { icon: 2 });
                layer.open({
                    title: '微信支付',
                    type: 2,//1 dom或文本，2 iframe,3 加载层,4 tips
                    area: ['300px', '300px'],
                    shadeClose: true,
                    content: '/buy/showQrcode?url2=' + res.url2 + '&ord_no=' + res.ord_no,
                });
            }, 'json');
        }

        // 删除订单
        function del(id) {
            layer.confirm('确定要删除这条吗？', { icon: 3 }, function () {
                $.post('/orders/del', { id }, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.alert(res.msg, { icon: 1 });
                    setTimeout(() => window.location.reload(), 1000);
                }, 'json');
            });
        }

        layui.use(['form', 'laypage'], function () {
            var laypage = layui.laypage,
                $ = layui.jquery;
            // 分页
            laypage.render({
                elem: 'pages',
                count: '{$total}',
                limit: '{$pageSize}',
                limits: [5, 10, 20, 30, 40, 50],
                curr: '{$page}',
                layout: ['prev', 'page', 'next', 'limit'],
                jump: function (obj, first) {
                    if (!first) {
                        window.location.href = '?page=' + obj.curr + '&limit=' + obj.limit;
                    }
                }
            });
        });
    </script>
</body>

</html>